$p: #{$prefix}-box;

#{$p} {
  @include flex-column();
  border-radius: 3px;
  overflow: hidden;
  background-color: #fff;
  border-width: 1px 1px 0 1px;
  border-style: solid;
  border-color: $border-color-1;
  box-shadow: $box-shadow;

  /**/
  > #{$p}_dialog {
    position: relative;
    padding: 0;
    @include flex-column();
    flex-grow: 1;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;

    > #{$p}_content {
      position: relative;
      padding: 0;
      flex-grow: 1;

      > #{$prefix}-scrollbar {
        > .el-scrollbar__wrap {
          > .el-scrollbar__view {
            padding: 10px;
          }
        }
      }

      > #{$p}_body {
        padding: 10px !important;
      }
    }

    > #{$p}_footer {
      padding: 5px 10px;
      flex-shrink: 0;
      border-top: 1px solid $border-color-3;
      text-align: right;
    }
  }

  &.has-height,
  &.page {
    > #{$p}_dialog {
      > #{$p}_content {
        > #{$prefix}-scrollbar {
          position: absolute;
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  &.page {
    height: 100%;
  }

  &.is-fullscreen {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: $z-index-box-fullscreen;
  }

  &.no-padding {
    > #{$p}_dialog {
      > #{$p}_content {
        padding: 0 !important;

        > #{$prefix}-scrollbar {
          > .el-scrollbar__wrap {
            > .el-scrollbar__view {
              padding: 0 !important;
            }
          }
        }

        > #{$p}_body {
          padding: 0 !important;
        }
      }
    }
  }
}

.el-row {
  .el-col {
    > #{$p} {
      height: 100%;
      > #{$p}_dialog {
        > #{$p}_content {
          > #{$p}_body {
            height: 100%;
          }
        }
      }
    }
  }
}
